<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>合同</title>
    <c:if test="${param.v=='3.0'}">
        <jsp:include page="../../head.jsp"/>
    </c:if>
    <style type="text/css">
        table tr {
            text-align: left;
            font-size: 13px;
            padding: 3px 0px;
        }

        .table_list_name {
            text-align: right
        }

        .contract {
            font-size: 18px;
            font-weight: bold;
            padding: 5px 0px;
        }

        .table-border tr td, .table-border tr th {
            border: 1px solid #000;
        }

        .table-border tr th {
            text-align: center;
        }

        .table-margin {
            margin-top: 10px
        }

        .tr_line {
            line-height: 25px;
        }

        .table_txt tr td {
            width: 15%
        }

        .input_text {
            background-color: white;
            border-color: #000000;
            border-style: solid;
            border-top-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 1px;
            border-left-width: 0px;
        }

        .input_text_1 {
            background-color: white;
            border-color: #000000;
            border-style: solid;
            border-top-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 0px;
            border-left-width: 0px;
        }
    </style>
</head>
<body>
<div id="contractDiv" align="center" style="margin: 10px">
    <table id="contractTable" style="width: 100%" class="table-input tr_line table_txt">
        <!-- 			<tr> -->
        <!-- 				<td colspan="6" align="center" class="contract">销 货 确 认 书<td> -->
        <!-- 			</tr> -->
        <!-- 			<tr> -->
        <!-- 				<td colspan="6" align="center" class="contract">SALES CONFIRMATION<td> -->
        <!-- 			</tr> -->
        <tr>
            <td colspan="6" align="center" class="contract">${declare.seller}</td>
        </tr>
        <tr>
            <td colspan="6" align="center" class="contract" style="border-top:1px solid #DADADA ">销
                货 确 认 书
            </td>
        </tr>
        <tr>
            <td colspan="6" align="center">SALES CONFIRMATION</td>
        </tr>
        <tr>
            <td class="table_list_name">卖方：</td>
            <td colspan="3">${declare.seller}</td>
            <td class="table_list_name">合同号：</td>
            <td>${declare.contract_no}</td>
        </tr>
        <tr>
            <td class="table_list_name">地址：</td>
            <td colspan="3">${declare.seller_address}</td>
            <td class="table_list_name">签约日期：</td>
            <td><fmt:formatDate value="${declare.contract_date}" pattern="yyyy-MM-dd"/></td>
        </tr>
        <tr>
            <td class="table_list_name">电话：</td>
            <td colspan="3">${declare.seller_phone}</td>
            <td class="table_list_name">传真：</td>
            <td>${declare.seller_fax}</td>
        </tr>
        <tr>
            <td class="table_list_name">买方：</td>
            <td colspan="5">${declare.buyer}</td>
        </tr>
    </table>
    <table id="contract" style="width: 100%"
           class="ui-jqgrid ui-widget ui-widget-content ui-corner-all tr_line table-margin ">
        <tr>
            <th class="ui-state-default ui-th-column ui-th-ltr">商品名称</th>
            <c:if test="${declare.record_id != null}">
                <th class="ui-state-default ui-th-column ui-th-ltr">手册项号</th>
                <th class="ui-state-default ui-th-column ui-th-ltr">版本号</th>
            </c:if>
            <th class="ui-state-default ui-th-column ui-th-ltr">规格型号</th>
            <th class="ui-state-default ui-th-column ui-th-ltr">计价数量</th>
            <th class="ui-state-default ui-th-column ui-th-ltr">计价单位</th>
            <th class="ui-state-default ui-th-column ui-th-ltr">单价</th>
            <th class="ui-state-default ui-th-column ui-th-ltr">币制</th>
            <th class="ui-state-default ui-th-column ui-th-ltr">总金额</th>
        </tr>
        <c:forEach var="cm" items="${declare.commodities}" varStatus="st">
            <tr class="ui-widget-content jqgrow ui-row-ltr">
                <td>${cm.name}</td>
                <c:if test="${declare.record_id != null}">
                    <td>${cm.handbook_item_no}</td>
                    <td>${cm.version_no}</td>
                </c:if>
                <td>${cm.key_elements}</td>
                <td>${cm.count}</td>
                <td>${cm.unit}</td>
                <td>${cm.unit_price}</td>
                <td>${cm.currency}</td>
                <td>${cm.total_price}</td>
            </tr>
        </c:forEach>
        <tr class="ui-widget-content jqgrow ui-row-ltr">
            <c:if test="${declare.record_id != null}">
                <td colspan="8" align="right" style="text-align: right;">${declare.deal_mode}
                    合计/Total:
                </td>
            </c:if>
            <c:if test="${declare.record_id == null}">
                <td colspan="6" align="right" style="text-align: right;">${declare.deal_mode}
                    合计/Total:
                </td>
            </c:if>
            <td>${declare.total_money}</td>
        </tr>
    </table>
    <table style="width: 100%">

        <tr>
            <td colspan="3" align="left">
                <input id="switchBtn" type="button" value="自定义合同条款" onclick="switchModel();"
                       class="ui-button ui-widget ui-state-default ui-corner-all"
                       style="font-size: 12px;">
                <input id="saveBtn" type="button" value="保存合同条款" onclick="saveContract();"
                       class="ui-button ui-widget ui-state-default ui-corner-all"
                       style="font-size: 12px;">
            </td>
        </tr>
    </table>

    <table style="width: 100%"
           class="ui-jqgrid ui-widget ui-widget-content ui-corner-all tr_line table-margin ">
        <tr>
            <th colspan="3" class="ui-state-default ui-th-column ui-th-ltr">协议条款(<font color="red">此处需自行黏贴对协议条款</font>)
            </th>
        </tr>
    </table>

    <form id="contractForm" onsubmit="javascript:;">
    <input id="declarationId" type="hidden" name="declarationId" value="${declare.id }">
    <input id="contractTermsId" type="hidden" name="id" value="${declare.contractTerms.id }">
    <input id="contractTermsType" type="hidden" name="contract_terms_type" value="${declare.contract_terms_type }">
    <input id="total_money" type="hidden" value="${declare.total_money }">
    <input id="deal_mode" type="hidden" value="${declare.deal_mode }">
    <input id="goods_package" type="hidden" value="${declare.goods_package }">
    <input id="goods_addr" type="hidden" value="${declare.goods_addr }">
    <input id="destination" type="hidden" value="${declare.commodities[0].destination }">
    <input id="lc_type" type="hidden" value="${declare.lc_type }">
    <input id="carton" type="hidden" value="${declare.carton }">
    <input id="currency" type="hidden" value="${declare.commodities[0].currency }">

    <table id="contractInfo" style="width: 100%"
           class="ui-jqgrid ui-widget ui-widget-content ui-corner-all tr_line table-margin ">
        <tr>
            <td>
                <textarea id="CONTRACT_REMARK" name="contract_remark" rows="10" cols="100%"
                          style="width: 99%;">${declare.contract_remark}</textarea>
            </td>
        </tr>
    </table>

    <table id="contractInfoModel" style="width: 100%"
           class="ui-jqgrid ui-widget ui-widget-content ui-corner-all tr_line table-margin ">
        <tr>
            <td colspan="3">(5)合同总值：<input id="contract_total_chn"
                                           name="contract_total_chn"
                                           class="input_text_1"
                                           value="${declare.contractTerms.contract_total_chn }"
                                           style="outline: none;"> <input id="currency_chn"
                                                                          name="currency_chn"
                                                                          class="input_text_1"
                                                                          value="${declare.contractTerms.currency_chn }"
                                                                          style="outline: none;">
            </td>
        </tr>
        <tr>
            <td colspan="3">Total Value in Word：<input
                    id="contract_total_en"
                    name="contract_total_en" class="input_text_1"
                    value="${declare.contractTerms.contract_total_en }"
                    style="outline: none;"> <input id="currency_en"
                                                   name="currency_en"
                                                   class="input_text"
                                                   value="${declare.contractTerms.currency_en }"
                                                   style="outline: none;">
            </td>
        </tr>
        <tr>
            <td colspan="3">(6)价格条款：<input id="price_terms_chn"
                                           name="price_terms_chn"
                                           class="input_text_1"
                                           value="${declare.contractTerms.price_terms_chn }"
                                           style="outline: none;"></td>
        </tr>
        <tr>
            <td colspan="3">Price Term：<input id="price_terms_en"
                                              name="price_terms_en"
                                              class="input_text_1"
                                              value="${declare.contractTerms.price_terms_en }"
                                              style="outline: none;"></td>
        </tr>
        <tr>
            <td colspan="3">(7)包 装：<input id="packing_chn" name="packing_chn"
                                          class="input_text_1"
                                          value="${declare.contractTerms.packing_chn }"
                                          style="outline: none;"></td>
        </tr>
        <tr>
            <td colspan="3">Packing：<input id="packing_en" name="packing_en"
                                           class="input_text"
                                           value="${declare.contractTerms.packing_en }"
                                           style="outline: none;"></td>
        </tr>
        <tr>
            <td colspan="3">(8)装运期：<input id="shipment_time_chn"
                                          name="shipment_time_chn"
                                          class="input_text"
                                          value="${declare.contractTerms.shipment_time_chn }"
                                          style="outline: none;"></td>
        </tr>
        <tr>
            <td colspan="3">Time of Shipment：<input id="shipment_time_en"
                                                    name="shipment_time_en"
                                                    class="input_text"
                                                    value="${declare.contractTerms.shipment_time_en }"
                                                    style="outline: none;"></td>
        </tr>
        <tr>
            <td colspan="3">(9)装运口岸和目的地：
                <input id="loading_port_chn" name="loading_port_chn"
                       class="input_text_1"
                       value="${declare.contractTerms.loading_port_chn }" style="outline: none;">至
                <input id="destination_port_chn" name="destination_port_chn"
                       class="input_text_1"
                       value="${declare.contractTerms.destination_port_chn }"
                       style="outline: none;">准许分批与转船。
            </td>
        </tr>
        <tr>
            <td colspan="3">Loading Port & Destination: From
                <input id="loading_port_en" name="loading_port_en"
                       class="input_text"
                       value="${declare.contractTerms.loading_port_en }" style="outline: none;">&nbsp;/&nbsp;
                <input id="destination_port_en" name="destination_port_en"
                       class="input_text"
                       value="${declare.contractTerms.destination_port_en }" style="outline: none;">
                with transhipment and partial shipments allowed.
            </td>
        </tr>
        <tr>
            <td>(10)付款条件：<input id="payment_terms_chn"
                                name="payment_terms_chn"
                                class="input_text"
                                value="${declare.contractTerms.payment_terms_chn }"
                                style="outline: none;"></td>
        </tr>
        <tr>
            <td>Terms of Payment：<input id="payment_terms_en"
                                        name="payment_terms_en"
                                        class="input_text"
                                        value="${declare.contractTerms.payment_terms_en }"
                                        style="outline: none;"></td>
        </tr>
        <tr>
            <td>(11)装运标记：<input id="shipping_marks_chn"
                                name="shipping_marks_chn"
                                class="input_text_1"
                                value="${declare.contractTerms.shipping_marks_chn }"
                                style="outline: none;"></td>
        </tr>
        <tr>
            <td>Shipping Marks：<input id="shipping_marks_en"
                                      name="shipping_marks_en"
                                      class="input_text"
                                      value="${declare.contractTerms.shipping_marks_en }"
                                      style="outline: none;"></td>
        </tr>
    </table>
    </form>
    <table style="width: 100%"
           class="ui-jqgrid ui-widget ui-widget-content ui-corner-all tr_line table-margin ">
        <tr>
            <td align="center" class="contract">卖方 <br> （THE SELLERS）<br> ${declare.seller}</td>
            <td></td>
            <td align="center" class="contract">买方 <br> （THE BUYERS）<br> ${declare.buyer}</td>
        </tr>
    </table>
</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        var isEdit = "${isEdit}";
        if(!isEdit || isEdit==false || isEdit=="false"){
            $("input").attr("readonly","readonly");
            $("#switchBtn").hide();
            $("#saveBtn").hide();
        }
        var contractTermsType = $("#contractTermsType").val();
        var total_money = $("#total_money").val();
        var deal_mode = $("#deal_mode").val();
        var goods_package = $("#goods_package").val();
        var goods_addr = $("#goods_addr").val();
        var destination = $("#destination").val();
        var lc_type = $("#lc_type").val();
        var carton = $("#carton").val();
        var currency = $("#currency").val();
        if (!contractTermsType) {
            $("#contractTermsType").val("1");
            $("#contractInfo").hide();
            $("#contract_total_chn").val(total_money);
            $("#contract_total_en").val(total_money);
            $("#price_terms_chn").val(deal_mode);
            $("#price_terms_en").val(deal_mode);
            $("#packing_chn").val(goods_package);
            $("#loading_port_chn").val(goods_addr);
            $("#destination_port_chn").val(destination);
            $("#payment_terms_chn").val(lc_type);
            $("#shipping_marks_chn").val(carton);
            $("#currency_chn").val(currency);
            $("#currency_en").val(currency);
        } else if (contractTermsType == "1") {
            $("#switchBtn").val("自定义合同条款");
            $("#contractInfo").hide();
            $("#contractInfoModel").show();
        } else if (contractTermsType == "2") {
            $("#switchBtn").val("合同条款模板");
            $("#contractInfo").show();
            $("#contractInfoModel").hide();
        }
    });
    function switchModel() {
        var switchBtnVal = $("#switchBtn").val();
        if (switchBtnVal == "自定义合同条款") {
            $("#contractTermsType").val("2");
            $("#switchBtn").val("合同条款模板");
            $("#contractInfo").show();
            $("#contractInfoModel").hide();
        }
        if (switchBtnVal == "合同条款模板") {
            $("#contractTermsType").val("1");
            $("#switchBtn").val("自定义合同条款");
            $("#contractInfo").hide();
            $("#contractInfoModel").show();
        }
    }
    function saveContract(){
        $.ajax({
                   type: "POST",
                   dataType: "json",
                   url: "./saveContract",
                   data: $('#contractForm').serialize(),
                   success: function (result) {
                       alert(result.msg);
                   },
                   error: function(data) {
                       alert("error:"+data.responseText);
                   }
               });
    }
</script>